<!--* 手机频道界面模拟组件 -->
<!--* 自适应说明: 自适应是通过CSS的ZOOM完成的, 效果不算好. 基础一倍图为: 642px -->
<!--* 根据父容器的宽度 / 642 * 100来算ZOOM的value -->
<!--*<div style="width: 400px">-->
<!--* <phone-monitor :slider-list="list"                // 轮播数据-->
<!--*                :nav-list="list"                   // 导航栏数据-->
<!--*                :data-stream-list="list"           // 信息流数据-->
<!--*                />-->
<!--*</div>-->
<template>
  <div id="phone-monitor-container" class="phone-monitor-container" :style="phoneMonitorZoomStyle">
    <div v-if="sliderList.length" id="pm-slider-container" class="slider-container">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="slider in sliderList" :key="slider.id">
          <img class="slider-img" :src="cfg.imageDomain + slider.url">
        </swiper-slide>
        <div slot="pagination" class="swiper-pagination" />
      </swiper>
    </div>
    <div v-if="navigationHotList.length" class="navigation-container">
      <div v-for="row in navigationHotList" :key="row.id" class="nav-row">
        <div v-for="nav in row" :key="nav.id" class="navigation-item">
          <img v-show="!!nav.bgImg" class="nav-bg-img" :src="cfg.imageDomain + nav.bgImg">
          <div v-show="!!nav.name" class="nav-bg-name">{{ new String(nav.name).length > 5 ? new String(nav.name).substring(0,5) : nav.name }}</div>
        </div>
      </div>
    </div>
    <div v-if="navigationList.length" class="navigation-container">
      <div v-for="row in navigationList" :key="row.id" class="nav-row">
        <div v-for="nav in row" :key="nav.id" class="navigation-item">
          <img v-show="!!nav.bgImg" class="nav-bg-img" :src="cfg.imageDomain + nav.bgImg">
          <div v-show="!!nav.name" class="nav-bg-name">{{ new String(nav.name).length > 5 ? new String(nav.name).substring(0,5) : nav.name }}</div>
        </div>
      </div>
    </div>
    <div v-for="row in dataStreamList" :key="row.id" class="data-stream-container">
      <div v-if="row.type === 1" class="single-pic-info-container">
        <div class="single-pic-info-data-container">
          <div class="single-pic-info-title-container">
            <div v-if="row.data.title.length > 30" class="single-pic-info-title">
              <el-tooltip effect="dark" :content="row.data.title" placement="top">
                <span v-if="row.data.isTop" class="single-pic-info-title-top">置顶</span><span>{{ row.data.title.substring(0, 58) + '...' }}</span>
              </el-tooltip>
            </div>
            <div v-else class="single-pic-info-title">
              <span v-if="row.data.isTop" class="single-pic-info-title-top">置顶</span>{{ row.data.title }}
            </div>
            <div class="single-pic-info-extra">
              <span v-if="row.data.source" class="single-pic-info-extra-item">来源：{{ row.data.source }}</span>
              <span v-if="row.data.classifications" class="single-pic-info-extra-item">分类：{{ row.data.classifications.join('，') }}</span>
              <span v-if="row.data.specialId" class="single-pic-info-extra-item" @click="navToSpecial(row.data.specialId)">专题：<span class="link">{{ row.data.specialName }}</span></span>
            </div>
          </div>
          <div class="single-pic-info-auth-container">
            <span class="single-pic-info-extra-item-mini">作者：{{ row.data.editor }}</span>
            <span class="single-pic-info-extra-item-mini">{{ row.data.publishedtime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }} 发布</span>
            <span class="single-pic-info-extra-item-mini"><i class="el-icon-view" style="margin-right: 5px" />{{ row.data.browser | formatStatisticsNumber }}</span>
            <span class="single-pic-info-extra-item-mini link" @click="navToComment(row.data.id)"><i class="el-icon-chat-line-square" style="margin-right: 5px" />{{ row.data.comments | formatStatisticsNumber }}</span>
            <span class="single-pic-info-extra-item-mini"><i class="iconfont el-icon-thirdfire" style="margin-right: 5px" />{{ row.data.heatNum | formatStatisticsNumber }}</span>
            <!--            <span class="single-pic-info-extra-item-more link"><i class="el-icon-more-outline" /></span>-->
            <el-dropdown @command="handleCommand">
              <span class="single-pic-info-extra-item-more link"><i class="el-icon-more-outline" /></span>
              <el-dropdown-menu slot="dropdown" :style="phoneMonitorZoomStyle">
                <el-dropdown-item v-if="row.data.isTop" :command="{type: 'cancelTop', infoId: row.data.id, dataStreamId: row.dataStreamId}">取消置顶</el-dropdown-item>
                <el-dropdown-item v-if="!row.data.isTop" :command="{type: 'setTop', infoId: row.data.id, dataStreamId: row.dataStreamId}">置顶</el-dropdown-item>
                <el-dropdown-item :command="{type: 'recommend', infoId: row.data.id, dataStreamId: row.dataStreamId}">推荐</el-dropdown-item>
                <el-dropdown-item v-if="row.data.status === 2" :command="{type: 'cancelPublish', infoId: row.data.id, dataStreamId: row.dataStreamId}">撤回</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div class="single-pic-info-img">
          <img :fit="'cover'" class="single-pic-info-img" :src="cfg.imageDomain + row.data.img">
        </div>
      </div>
      <div class="triple-pic-info-container" />
      <div v-if="row.type === 3" class="single-pic-special-container">
        <img class="single-pic-special-img" :fit="'cover'" :src="cfg.imageDomain + row.data.imgPath">
        <div class="mask-container">单图专题</div>
        <div class="single-pic-special-title-mask">{{ row.data.srcTitle }}</div>
      </div>
      <div v-if="row.type === 4" class="event-special-container">
        <div class="mask-container">事件专题</div>
        <img class="event-special-bg-img" :fit="'cover'" :src="cfg.imageDomain + row.data.imgPath">
        <div class="event-special-bg-mask" />
        <div>
          <div class="event-special-title">
            {{ row.data.srcTitle }}
          </div>
          <div class="event-special-event-list">
            <div v-for="info in row.data.informationList.slice(0, 3)" :key="info.id" class="event-special-event-item">
              <div class="event-special-event-title">·  {{ info.title }}</div>
              <div class="event-special-event-time">{{ info.publishedtime | parseTime('{y}-{m}-{d} {h}:{i}') }}</div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="row.type === 5" class="multi-special-container">
        <div class="mask-container">专题组</div>
        <div style="width: 100%">
          <div class="multi-special-title">
            {{ row.data.srcTitle }}
          </div>
          <div class="multi-special-list">
            <img v-for="special in row.data.specialList" :key="special.id" class="multi-special-img" :fit="'cover'" :src="cfg.imageDomain + special.homeImg">
          </div>
        </div>
      </div>
      <div v-if="row.type === 6" class="single-pic-ads-container">
        <div class="mask-container">广告</div>
        <img class="single-pic-ads-img" :fit="'cover'" :src="cfg.imageDomain + row.data.imgPath">
        <div class="single-pic-ads-title-mask">
          {{ row.data.srcTitle }}
        </div>
      </div>
      <div v-if="row.type == 7">
        <div style="font-size: 13px" class="nb-broke-bews-information-flow">微兔眼爆料</div>
        <div style="display: flex;width: 100%">
          <div style="font-size: 16px;width: 600px;word-wrap:break-word;margin-top: 12px;line-height: 22px">
            {{ row.data.content }}
          </div>
          <div v-if="row.data.resType == 1 && row.data.url" class="video-picture" style="display: flex">
            <small v-if="row.data.url.split(',').length > 3" style="width: 72px;margin-top: 100px;">共{{ row.data.url.split(',').length }}张图</small>
            <img v-for="item in row.data.url.split(',').slice(0,3)" :key="item" :src="cfg.imageDomain + item" style="width: auto;height: 120px;">
          </div>
          <div v-else-if="row.data.resType == 2 && row.data.coverImgPath" class="video-picture">
            <a :href="cfg.imageDomain + row.data.url" target="_Blank">
              <img v-if="row.data.coverImgPath" :src="cfg.imageDomain + row.data.coverImgPath" class="video-cover">
              <img
                v-else
                class="video-cover"
                :src="cfg.imageDomain + row.data.url + '?vframe/jpg/offset/0/w/0/h/0'"
              >
              <img src="@/assets/staticImages/bf.png" class="img-video-play">
            </a>
          </div>
        </div>
        <span style="color: #007dd9;">#{{ row.data.talkName }}#</span>
        <div STYLE="font-size: 11px;line-height: 2;color: #7E8C9A"><span>爆料人：{{ row.data.nickName }}</span>&nbsp;&nbsp;&nbsp;
          <span>{{ row.data.createTime| parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}&nbsp;&nbsp;发布</span>&nbsp;&nbsp;&nbsp;<span>浏览数：{{ row.data.browse }}</span>&nbsp;&nbsp;&nbsp;
          <span>评论数：{{ row.data.commentAmount }}</span>&nbsp;&nbsp;&nbsp;<span>热度：{{ row.data.heat }}</span>
        </div>
      </div>
    </div>
    <div v-for="row in advertise" :key="row.id" class="advertise-container">
      <img v-show="!!row.img" :src="cfg.imageDomain + row.img" class="advertise-container-img">
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import Swiper2, { Navigation, Pagination } from 'swiper'
import 'swiper/swiper-bundle.css'
import request from '@/utils/request'

Swiper2.use([Navigation, Pagination])

export default {
  name: 'PhoneMonitor',
  components: { Swiper, SwiperSlide },
  props: {
    sliderList: {
      type: Array,
      default: () => []
    },
    navList: {
      type: Array,
      default: () => []
    },
    navHotList: {
      type: Array,
      default: () => []
    },
    dataStreamList: {
      type: Array,
      default: () => []
    },
    advertise: {
      type: Array,
      default: () => []
    }
  },
  data: function() {
    return {
      // 手机模拟器zoom样式
      phoneMonitorZoomStyle: 'zoom: 100%;',
      // 将navList处理过的
      navigationList: [],
      navigationHotList: [],
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        }
      }
    }
  },
  watch: {
    // 将navList处理为想要的数据结构
    navList: function(list) {
      let navList = [...list];
      // 排序 行号小的和列号小的在前面
      navList = navList.sort((a, b) => {
        if (a.rowNum !== b.rowNum) {
          return a.rowNum - b.rowNum;
        }
        return a.columnNum - b.columnNum;
      })
      // 数量 < 6个, 则为一排
      if (navList.length < 6) {
        this.navigationList = [navList];
        return;
      }
      // 数量5个为1排
      if (navList.length >= 5) {
        const firRowIndex = Math.ceil(navList.length / 5);
        // 因为 space-around的原因, 奇数会对不齐, 所以补一个空对象html中v-show有判断
        const buCount = firRowIndex * 5 - navList.length;
        for (let i = 0; i < buCount; i++) {
          navList.push({})
        }
        for (let i = 0; i < firRowIndex; i++) {
          this.navigationList[i] = navList.slice(i * 5, (i + 1) * 5)
        }
      }
    },
    navHotList: function(list) {
      let navList = [...list];
      // 排序 行号小的和列号小的在前面
      navList = navList.sort((a, b) => {
        if (a.rowNum !== b.rowNum) {
          return a.rowNum - b.rowNum;
        }
        return a.columnNum - b.columnNum;
      })
      // 数量 < 6个, 则为一排
      if (navList.length < 6) {
        this.navigationHotList = [navList];
        return;
      }
      // 数量5个为1排
      if (navList.length >= 5) {
        const firRowIndex = Math.ceil(navList.length / 5);
        // 因为 space-around的原因, 奇数会对不齐, 所以补一个空对象html中v-show有判断
        const buCount = firRowIndex * 5 - navList.length;
        for (let i = 0; i < buCount; i++) {
          navList.push({})
        }
        for (let i = 0; i < firRowIndex; i++) {
          this.navigationHotList[i] = navList.slice(i * 5, (i + 1) * 5)
        }
      }
    }
  },
  mounted: function() {
    this.charFilter(5);
    const parentContainerWidth = document.getElementById('phone-monitor-container').parentNode.offsetWidth;
    this.phoneMonitorZoomStyle = `zoom: ${(parentContainerWidth / 642 * 100) + '%'};`;
  },
  methods: {
    navToSpecial(id) {
      this.$router.push(`/special/specialInformationList?specialId=${id}`);
    },
    navToComment(id) {
      this.$router.push(`/comments/vCommentsList?targetId=${id}`)
    },
    handleCommand(data) {
      switch (data.type) {
        case 'setTop':
          request({
            method: 'post',
            url: `/contentData/contentDataStream/setInfoTop`,
            data: {
              id: data.dataStreamId,
              infoId: data.infoId
            }
          }).then(res => {
            this.$message.success('置顶成功');
            this.$emit('updateList');
          });
          break;
        case 'cancelTop':
          request({
            method: 'post',
            url: `/contentData/contentDataStream/cancelInfoTop`,
            data: {
              id: data.dataStreamId,
              infoId: data.infoId
            }
          }).then(res => {
            this.$message.success('置顶成功');
            this.$emit('updateList');
          });
          break;
        case 'recommend':
          request({
            method: 'post',
            url: `/information/vInformation/recommend?id=${data.infoId}`
          }).then(res => {
            this.$message.success('推荐成功');
            this.$emit('updateList');
          });
          break;
        case 'cancelPublish':
          request({
            method: 'post',
            url: `/information/vInformation/unPublish?id=${data.infoId}`
          }).then(res => {
            this.$message.success('取消发布成功');
            this.$emit('updateList');
          });
          break;
        default:
          break;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.phone-monitor-container {
  width: 642px;
}
.slider-container{
  position: relative;
  overflow: hidden;
}
.slider-img {
  width: 100%;
  height: 297px;
}
.navigation-item {
  width: 100px;
  display: inline-block;
  text-align: center;
}
.nav-bg-img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
}
.nav-bg-name {
  font-size: 18px;
  font-weight: 400;
  color: #1D2023;
}
.nav-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}
.nav-row:last-child {
  margin-bottom: 0;
}
.navigation-container {
  margin-top: 20px;
}
.data-stream-container {
  margin-top: 20px;
}
.data-stream-container > * {
  margin-bottom: 20px;
}
.single-pic-info-extra-item {
  font-size: 14px;
  font-weight: 300;
  color: #606972;
  margin-left: 30px;
}
.single-pic-info-extra-item:first-child {
  margin-left: 0;
}
.single-pic-info-extra-item-mini {
  font-size: 12px;
  font-weight: 300;
  color: #7E8C9A;
  margin-left: 20px;
}
.single-pic-info-extra-item-more {
  margin-left: 10px;
}
.single-pic-info-extra-item-mini:first-child {
  margin-left: 0;
}

.single-pic-info-title {
  font-size: 18px;
  font-weight: 400;
  color: #1D2023;
  margin-bottom: 10px;
}
.single-pic-info-title-top {
  color: #FF214A;
  margin-right: 10px;
}
.single-pic-info-data-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 20px;
}
.single-pic-info-img {
  width: 160px;
  height: 120px;
  flex-shrink: 0;
}
.single-pic-info-container {
  display: flex
}
.link {
  font-weight: 300;
  color: #2D7ACF;
  cursor: pointer;
}
.mini-icon {
  width: 12px;
  height: 9px;
  margin-right: 3px;
}
.mask-container {
  position: absolute;
  left: 0;
  top: 20px;
  width: 112px;
  height: 44px;
  background: rgba(213, 221, 229, 0.8);
  border-radius: 0 4px 4px 0;
  font-size: 18px;
  font-weight: 400;
  color: #1D2023;
  text-align: center;
  line-height: 44px;
  z-index: 1000;
}
.single-pic-special-container{
  position: relative;
  width: 100%;
  height: 195px;
  .single-pic-special-img {
    width: 100%;
    height: 195px;
  }
  .single-pic-special-title-mask {
    width: 100%;
    height: 64px;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 20px;
    background: rgba(0, 0, 0, 0.5);
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
  }
}
.event-special-container {
  position: relative;
  width: 100%;
  height: 219px;
  padding: 20px;
  display: flex;
  align-items: flex-end;

  .event-special-bg-img {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -2;
    left: 0;
    top: 0;
  }
  .event-special-title {
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
  }
  .event-special-event-list {
    margin-top: 18px;
  }
  .event-special-event-item {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 400;
    color: #FFFFFF;
    margin-bottom: 10px;
  }
  .event-special-event-item:last-child {
    margin-bottom: 0;
  }
  .event-special-event-title {
    width: 480px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .event-special-bg-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.5);
    left: 0;
    top: 0;
  }
}
.multi-special-container {
  position: relative;
  width: 100%;
  height: 227px;
  background: #F7F8F9;
  padding: 20px 0 20px 20px;
  display: flex;
  align-items: flex-end;
  .multi-special-title {
    font-size: 18px;
    font-weight: 400;
    color: #1D2023;
  }
  .multi-special-list {
    width: 100%;
    margin-top: 10px;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: scroll;
  }
  .multi-special-img {
    width: 194px;
    height: 69px;
    margin-right: 10px;
    display: inline-block;
  }
}
.single-pic-ads-container {
  width: 100%;
  height: 302px;
  position: relative;
  .single-pic-ads-img {
    height: 100%;
    width: 100%;
  }
  .single-pic-ads-title-mask {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background: rgba(0, 0, 0, 0.5);
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
    padding: 20px;
  }
}
.advertise-container {
  position: fixed;
  bottom: 100px;
  right: 50px;
  width: 50px;
  height: 50px;
  .advertise-container-img {
    width: 100%;
    height: 100%;
  }
}
.img-video-play {
  margin: 19px -58px;
  width: 40px;
  position: relative;
}
.nb-broke-bews-information-flow {
  text-align: center;
  line-height: 25px;
  width: 100px;
  height: 25px;
  background: rgba(213,221,229,0.8);
  border-radius: 0 4px 4px 0;
  }
  .video-cover {
    width: 70%;
    height: 120px;
  }
  .video-picture {
    margin-top: 12px;
    width: 300px;
    margin-left: 10px
  }
</style>
